<template>
  <div id="bottom1" style="width: 100%; height: 100%"></div>
</template>

<script>
//引入所需的图表
import { Column } from "@antv/g2plot";
//引入get请求
import { get } from "@/utils/request";
export default {
  data() {
    return {
      //总数数组
      countData: [],
    };
  },
  mounted() {
    this.getCountData;
    this.initBot1();
  },
  methods: {
    //创建图表
    initBot1() {
      const data = [
        {
          type: "颗粒物",
          sales: 38,
        },
        {
          type: "噪声",
          sales: 52,
        },
        {
          type: "电磁辐射",
          sales: 61,
        },
        {
          type: "放射性污染",
          sales: 145,
        },
        {
          type: "热能",
          sales: 48,
        },
        {
          type: "振动",
          sales: 38,
        },
        {
          type: "重金属",
          sales: 38,
        },
        {
          type: "水污染",
          sales: 38,
        },
      ];

      const columnPlot = new Column("bottom1", {
        data,
        xField: "type",
        yField: "sales",
        label: {
          // 可手动配置 label 数据标签位置
          position: "middle", // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: "#FFFFFF",
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: "类型",
          },
          sales: {
            alias: "数量",
          },
        },
      });

      columnPlot.render();
    },
    //获取所有总数数据
    async getCountData() {
      let res = await get("/count/countAll");
      console.log(res.data);
      //对数据的格式进行处理
      this.countData = res.data.map((item) => {
        return {
          type: item.type,
          sales: item.value,
        };
      });
    },
  },
};
</script>

<style scoped>
</style>